//input 显示
const input = document.querySelector('header .head-center input');
input.addEventListener('focus', function () {
    this.style.backgroundColor = '#ddd';
});
input.addEventListener('blur', function () {
    this.style.backgroundColor = 'transparent';
});

const head_top = document.querySelector('.head-top');
const menu = document.querySelector('.menu');
const menuScrolling = document.querySelector('.menu-scrolling');
const aside = document.querySelector('aside');
//document滚动时，菜单栏固定
let scrollTop = undefined;
window.addEventListener('scroll', _ => {
    scrollTop = document.documentElement.scrollTop;
    if (scrollTop > 80) {
        head_top.style.position = 'fixed';
    }
    if (scrollTop < 80) {
        head_top.style.position = 'static'
    }

    let menuTop = menu.offsetTop + menu.offsetHeight;
    if (scrollTop > menuTop) {
        menuScrolling.style.display = 'flex'
    }
    if (scrollTop < menuTop) {
        menuScrolling.style.display = 'none'
    }

    let documentClientHeight = document.documentElement.clientHeight;
    if (scrollTop > documentClientHeight) {
        aside.style.display = 'block'
    }
    if (scrollTop < documentClientHeight) {
        aside.style.display = 'none'
    }
});

//刷新 待定

//回到顶部
document.querySelector('aside .goBackTop').addEventListener('click', _ => {
    document.body.scrollTop = document.documentElement.scrollTop = 0
});

//slideshow
window.addEventListener('load', function () {
    const slideshow = document.querySelector('main ul .slideshow');
    const slideshowUl = document.querySelector('main ul .slideshow ul');
    const slideshowList = document.querySelectorAll('.slideshow ul>li');
    const btnLeft = document.querySelector('.slideshow button:first-child');
    const btnRight = document.querySelector('.slideshow button:last-child');
    let count = 0;
    //轮播图容器的宽度
    const slideshowWidth = slideshow.offsetWidth;
    //设置标识index 根据指定的index来改变count的值实现点击 ol li来快速转换轮播图位置

    const dots = document.querySelectorAll('.slideshow .row-2 ol li');
    if (count == 0) {
        dots[0].id = 'active';
    }
    dots.forEach((item, index) => {
        item.setAttribute('index', index + 1);
        item.addEventListener('click', function () {
            dots[count].id = '';
            count = this.getAttribute('index') - 1;
            slideshowUl.style.left = `${-slideshowWidth * count}px`;
            this.id = 'active';
        });
    });

    //按钮操作
    btnRight.addEventListener('click', function () {
        count++;
        //
        if (count > slideshowList.length) {
            count = 1;
            slideshowUl.style.left = 0;
        }
        //轮播图移动 此处可以用第三方动画库
        animate(slideshowUl, -count * slideshowWidth);
        //点移动
        dots[count - 1].id = '';
        dots[count === slideshowList.length ? 0 : count].id = 'active';
    });
    btnLeft.addEventListener('click', function () {
        count--;
        if (count === -1) {
            count = slideshowList.length - 1;
            slideshowUl.style.left = `${-slideshowWidth * (count + 1)}px`;
        }
        animate(slideshowUl, -count * slideshowWidth);
        //count = 3
        dots[count === slideshowList.length - 1 ? 0 : count + 1].id = '';
        dots[count].id = 'active';
    });
    // 根据外层main ul：first-child的大小来确定 slideshowUl每个li的大小
    slideshowList.forEach(v => {
        v.style.width = slideshowWidth + 'px';
        v.style.height = slideshow.clientHeight + 'px';
    })
    //复制第一张放在最后
    slideshowUl.innerHTML += `
    <li style="width: ${slideshowWidth}px; height: ${slideshow.clientHeight}px;">
        <a href="javascript:;">
            <img src="https://dummyimage.com/600x400/ddd/fff&text=1" alt="1">
        </a>
    </li>
   ` ;
    //autoPlay自动播放
    let timer = null;
    function autoPlay() {
        timer = setInterval(() => {
            btnRight.click()
        }, 2000);
    }
    autoPlay();
    //鼠标放在图片上时停止自动播放； 离开就开始播放
    slideshow.addEventListener('mouseover', function () {
        clearInterval(timer);
    });
    slideshow.addEventListener('mouseleave', function () {
        autoPlay();
    });
});

